<template>
    <div class="company-tree">
        <div class="company-tree__search">
            <a-input placeholder="请输入公司名称" allow-clear>
                <template #prefix><icon-search />
                </template>
            </a-input>
            <a-button type="primary" @click="onAdd">
                <template #icon><icon-plus /></template>
            </a-button>
        </div>
        <div class="company-tree__container">
            <div class="company-tree__tree">
                <a-tree :data="companyDicList" :field-names="{ key: 'value', title: 'label' }" @select="select">
                    <template #extra="node">
                        <a-trigger trigger="click" align-point animation-name="slide-dynamic-origin"
                            auto-fit-transform-origin position="bl" scroll-to-close>
                            <icon-more-vertical class="action" />
                            <template #content>
                                <RightMenu :data="node" @on-menu-item-click="onMenuItemClick" />
                            </template>
                        </a-trigger>
                    </template>
                </a-tree>
            </div>
        </div>
    </div>

    <CompanyAddModal ref="CompanyAddModalRef" @save-success="search" />
</template>

<script setup lang="ts">
import { deleteCompany } from '@/apis/website/company';
import { useCompanyDict } from '@/hooks/app';
import type { LabelValueState } from '@/types/global';
import { Message, Modal } from '@arco-design/web-vue';
import CompanyAddModal from './CompanyAddModal.vue';
import RightMenu from './RightMenu.vue';

const { companyDicList, getCompanyDicList } = useCompanyDict()

const CompanyAddModalRef = ref<InstanceType<typeof CompanyAddModal>>()
//新增
const onAdd = () => {
    CompanyAddModalRef.value?.onAdd()
}


const emit = defineEmits<{
    (e: 'node-click', keys: Array<any>): void
}>()

const selectedKeys = ref()

//选中节点
const select = (keys: Array<any>) => {
    if (selectedKeys.value && selectedKeys.value[0] === keys[0]) {
        return
    }
    selectedKeys.value = keys
    console.log(keys)
    emit('node-click', keys)
}

//查询
const search = () => {
    getCompanyDicList()
}

// 点击菜单项
const onMenuItemClick = (mode: string, node: LabelValueState) => {
    console.log(node)
    if (mode === 'update') {
        CompanyAddModalRef.value?.onUpdate(node.value)
    } else if (mode === 'delete') {
        Modal.warning({
            title: '提示',
            content: `是否确定删除 [${node.label}]？`,
            hideCancel: false,
            okButtonProps: { status: 'danger' },
            onBeforeOk: async () => {
                try {
                    const res = await deleteCompany(node.value)
                    if (res.success) {
                        Message.success('删除成功')
                        await getCompanyDicList()
                    }
                    return res.success
                } catch (error) {
                    return false
                }
            },
        })
    }
}

onMounted(() => {
    getCompanyDicList()
})
</script>

<style lang="scss" scoped>
:deep(.arco-tree-node) {
    line-height: normal;
    border-radius: var(--border-radius-medium);
    margin: 5px 0;

    .action {
        opacity: 0;
    }

    &:hover {
        background-color: var(--color-secondary-hover);

        .action {
            opacity: 1;
        }
    }

    .arco-tree-node-switcher {
        width: 0;
        margin-right: 0;
    }

    .arco-tree-node-title {
        &:hover {
            background-color: transparent;
        }
    }

    .arco-tree-node-title-text {
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

:deep(.arco-tree-node-selected) {
    font-weight: bold;
    background-color: rgba(var(--primary-6), 0.1);

    &:hover {
        background-color: rgba(var(--primary-6), 0.1);
    }

    .arco-typography {
        color: rgb(var(--primary-6));
    }
}

.company-tree {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;

    &__search {
        display: flex;
        justify-content: start;
        margin-bottom: 8px;

        .arco-btn {
            margin-left: 8px;
            padding: 0 15px;
        }
    }

    &__container {
        flex: 1;
        overflow: hidden;
        background-color: var(--color-bg-1);
        position: relative;
        height: 100%;
        margin-bottom: 10px;
    }

    &__tree {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto
    }
}
</style>